<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/mist-list/mist-list.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">

<link rel="import" href="helpers/mist-lists-behavior.html">
<link rel="import" href="helpers/owner-filter-behavior.html">

<link rel="import" href="keys/key-actions.html">
<link rel="import" href="keys/key-add.html">
<link rel="import" href="keys/key-page.html">

<dom-module id="page-keys">
    <template>
        <style include="shared-styles">
            [hidden] {
                display: none !important;
            }

            paper-dialog {
                position: fixed !important;
            }
        </style>
        <app-route route="{{route}}" pattern="/:key" data="{{data}}"></app-route>
        <template is="dom-if" if="[[_isListActive(route.path)]]" restamp>
            <key-actions actions={{actions}} items=[[selectedItems]] model="[[model]]" user="[[model.user.id]]" members="[[model.membersArray]]" org="[[model.org]]">
                <mist-list selectable resizable column-menu multi-sort apiurl="/api/v1/keys" id="keysList" name="Keys"
                    primary-field-name="id" frozen=[[_getFrozenColumn()]] visible=[[_getVisibleColumns()]]
                    selected-items="{{selectedItems}}" renderers=[[_getRenderers()]] route={{route}} item-map=[[model.keys]]
                    user-filter="[[model.sections.keys.q]]" actions=[[actions]] filter-method="[[_ownerFilter()]]">
                    <p slot="no-items-found">No keys found.</p>
                </mist-list>
            </key-actions>

            <div class="absolute-bottom-right" hidden$="[[!check_perm('add','key', null, model.org, model.user)]]">
                <paper-fab id="keyAdd" icon="add" on-tap="_addResource"></paper-fab>
            </div>
        </template>
        <key-add model="[[model]]" section="[[model.sections.keys]]" hidden$=[[!_isAddPageActive(route.path)]] docs=[[config.features.docs]]></key-add>
        <key-page model="[[model]]" key="[[_getKeyPair(data.key, model.keys)]]" resource-id="[[data.key]]" section="[[model.sections.keys]]"
            hidden$=[[!_isDetailsPageActive(route.path)]]></key-page>
    </template>
    <script>
        Polymer({
            is: 'page-keys',
            behaviors: [
                mistListsBehavior,
                ownerFilterBehavior,
                rbacBehavior
            ],
            properties: {
                model: {
                    type: Object
                },
                config: {
                    type: Object
                },
                actions: {
                    type: Array
                },
                selectedItems: {
                    type: Array
                }
            },

            _isAddPageActive: function (path) {
                return path == '/+add';
            },

            _isDetailsPageActive: function (path) {
                if (path && path != '/+add' && this.querySelector('key-page')) {
                    this.querySelector('key-page').updateState();
                }
                return path && path != '/+add';
            },

            _isListActive: function (path) {
                return !path;
            },

            _getKeyPair: function (id) {
                if (this.model.keys)
                    return this.model.keys[id];
            },

            _addResource: function (e) {
                this.dispatchEvent(new CustomEvent('go-to', {
                    bubbles: true,
                    composed: true,
                    detail: {
                        url: this.model.sections.keys.add
                    }
                }));

            },

            _getFrozenColumn: function () {
                return ['name'];
            },

            _getVisibleColumns: function () {
                return ['machines', 'isDefault', 'created_by', 'id', 'tags'];
            },

            _getRenderers: function (keys) {
                var _this = this;
                return {
                    'name': {
                        'body': function (item, row) {
                            return '<strong class="name">' + item + '</strong>';
                        }
                    },
                    'machines': {
                        'body': function (item, row) {
                            return item.length;
                        }
                    },
                    'isDefault': {
                        'title': function (item, row) {
                            return 'Default';
                        },
                        'body': function (item, row) {
                            return item ?
                                '<span class="default"><iron-icon icon="communication:vpn-key"></iron-icon> Default key</span>' :
                                '';
                        }
                    },
                    'owned_by': {
                        'title': function (item, row) {
                            return 'owner';
                        },
                        'body': function (item, row) {
                            return _this.model.members[item] ? _this.model.members[item].name || _this.model
                                .members[item].email || _this.model.members[item].username : '';
                        }
                    },
                    'created_by': {
                        'title': function (item, row) {
                            return 'created by';
                        },
                        'body': function (item, row) {
                            return _this.model.members[item] ? _this.model.members[item].name || _this.model
                                .members[item].email || _this.model.members[item].username : '';
                        }
                    },
                    'tags': {
                        'body': function (item, row) {
                            var tags = item,
                                display = "";
                            for (key in tags) {
                                display += "<span class='tag'>" + key;
                                if (tags[key] != undefined && tags[key] != "")
                                    display += "=" + tags[key];
                                display += "</span>";
                            }
                            return display;
                        }
                    }
                }
            }
        });
    </script>
</dom-module>